<template>
	<view class="student-order-container">
		<cc-navbar :title="navbarTitle"></cc-navbar>
		<view class="list" v-if="count">
			<!-- @tap="handleDetail(item.order_num)" -->
			<view class="list-item" v-for="(item, index) in list" :key="index">
				<view class="list-item-top">
					<view class="list-item-top-left fc" @tap.stop="$copy(item.order_num)">
						<view class="u-line-1">{{ item.order_num || '-' }}</view>
						<view class="pl10 pr10">
							<u-line color="#111111" length="24rpx" direction="col"></u-line>
						</view>
						<view>复制</view>
					</view>
					<view class="list-item-top-right">
						<u-text size="28rpx" :type="item.statusData.type" :text="item.statusData.label"></u-text>
					</view>
				</view>
				<view class="list-item-main">
					<view class="fc mb10">
						<view class="font-info mr20">订单类型:</view>
						<view>
							{{ item.orderType.label }}
						</view>
					</view>
					<view class="price fc">
						<view class="fc">
							<view class="font-info mr10">应收/应退:</view>
							<u-tag size="mini" v-if="item.orderType" :type="item.orderType.type"
								:text="item.orderType.tag"></u-tag>
							<view>￥{{ item.actual_total_fee }}</view>
						</view>
						<view class="fc">
							<view class="font-info mr10">实收/实退:</view>
							<u-tag size="mini" v-if="item.orderType" :type="item.orderType.type"
								:text="item.orderType.tag"></u-tag>
							<view>￥{{ item.receipt_fee }}</view>
						</view>
					</view>
				</view>
				<view class="fcb">
					<view class="course-view" v-if="item.order_items && item.order_items.length">
						<view class="course-view-item" v-for="(row, oIndex) in item.order_items" :key="oIndex">
							<view class="course-name mb10">
								<text class="u-line-1">{{ row.course_name }}</text>
							</view>
							<block v-if="row.order_type === 1">
								<view class="fc">
									<view>{{ row.total_hour }}{{ row.mode === 'hour' ? '课时' : '天' }}</view>
									<view class="pl10 pr10">
										<u-line color="#111111" length="24rpx" direction="col"></u-line>
									</view>
									<view>{{ row.actual_fee }}元</view>
								</view>
							</block>
							<view v-else>{{ row.fee_mode.label }}</view>
						</view>
					</view>
					<view class="course-view-right">
						<view class="">¥{{ item.original_total_fee }}</view>
						<view class="font-info">共{{ item.order_items.length }}件</view>
					</view>
				</view>
			</view>
		</view>
		<cc-loadmore :loading="loading" :current="list.length" :count="count" />
		<cc-empty v-if="!loading && !count" mode="list" />
	</view>
</template>

<script>
	import {
		orderList
	} from '@/codecat/api/education/order/index';
	import {
		getOrderStatus,
		getOrderType
	} from '@/codecat/config';
	export default {
		// 学员详情-订单
		name: 'StudentOrder',
		data() {
			return {
				navbarTitle: '',
				loading: false,
				list: [],
				count: 0,
				query: {
					student_id: '',
					page: 1,
					limit: 10
				}
			};
		},
		onLoad() {
			const options = this.$Route.query;
			if (options) {
				this.query.student_id = options.id;
				this.getList(1);
			}
		},
		onReachBottom() {
			if (this.list.length < this.count) {
				this.getList();
			}
		},
		methods: {
			getList(first) {
				const query = this.$lodash.cloneDeep(this.query);
				if (first) {
					query.page = 1;
					this.list = [];
					this.count = 0;
				} else {
					query.page += 1;
				}
				this.loading = true;
				orderList(query)
					.then((res) => {
						this.loading = false;
						this.query.page = query.page;
						const {
							list,
							count
						} = res.data;
						this.count = count || 0;
						if (Array.isArray(list) && list.length) {
							this.$lodash.forEach(list, (e) => {
								e.statusData = getOrderStatus(parseFloat(e.status));
								e.orderType = getOrderType(parseFloat(e.order_type));
								// 后端退费返回负数，前端取正数显示，配合标签
								e.actual_total_fee = Math.abs(e.actual_total_fee);
								e.receipt_fee = Math.abs(e.receipt_fee);
							});
							this.list = this.list.concat(list);

							if (query.page === 1) {
								this.navbarTitle = `${this.list[0].student_name}-订单记录`;
							}
						}
					})
					.catch((_) => {
						this.loading = false;
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>